<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>消息推送</title>
</head>
<body>
<button id="noticModalButton" style="display: none" data-toggle="modal" data-target="#noticModal"></button>
<div class="modal fade" id="noticModal" tabindex="-1" role="dialog" aria-labelledby="noticModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 100%;width: 1300px">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="noticModal_title"></h4>
            </div>
            <div class="modal-body">
                <div style="margin-bottom: 15px">
                    <span id="noticModal_info"> </span>
                </div>
                <div class='card' id="notic-chart-card">
                    <div class='card-body' style="padding: 10px 10px 20px 10px">
                        <div class='col-md-12' id="notic_data_chart" style="width:1250px;height:250px;">
                        </div>
                    </div>
                </div>
                <!--<div id="notic_data_chart" class="col-md-12" style="height: 250px"></div>-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<div class="content-wrapper">
    <div class='row' style='margin-bottom: -50px'>
        <div class="col-lg-12 grid-margin stretch-card">
            <div class="card" >
                <div class='card-body' style="padding: 50px;" >
                    <div class="col-md-12">
                        <div th:if="${!hasNotic}" style="height: 300px">
                            <h5>目前没有系统消息或设备运行警报</h5>
                        </div>
                        <div th:if="${hasNotic}">
                            <div class="col-md-4 updateMenu-title-left" style="margin:0px 0px 10px 0px; padding: 0px">
                                <h4 class="card-title" style="width: 300px;font-size: 25px">消息推送</h4>
                                <p class="card-description" style="margin-bottom: 0px">系统消息或设备运行警报</p>
                            </div>
                            <div class="input-group">
                                <div class="input-group-prepend" >
                                    <select id="modal_parm" class="magic btn btn-warning " style="border-radius: 10px 10px 10px 10px" >
                                        <option value="sulfurDioxide">时间</option>
                                        <option value="nitrogenOxide">状态</option>
                                        <option value="particulate">消息等级</option>
                                    </select>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table class="table">
                                    <tbody >
                                    <tr th:each="notic,iterStat:${noticList}" th:class="${notic.noticState} + ' pointer noticList'">
                                        <td th:text="${notic.title}"></td>
                                        <td th:text="${notic.noticState}"></td>
                                        <td th:text="${notic.getTimeString()}"></td>
                                        <td th:if="${notic.readState} eq '未读'" class="notic_state"><img src="/static/images/menuimg/unread.png"></td>
                                        <td th:if="${notic.readState} eq '已读'" class="notic_state"><img src="/static/images/menuimg/read.png"></td>
                                        <td class="notic_id" th:text="${notic.id}"></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/js/overWrite/noticPage.js}"></script>

</body>
</html>